
import React, { useState, useRef, useEffect } from 'react';
import { SendIcon } from './Icons';

interface ChatInputProps {
  onSendMessage: (message: string) => void;
  isLoading: boolean;
}

const ChatInput: React.FC<ChatInputProps> = ({ onSendMessage, isLoading }) => {
  const [input, setInput] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    }
  }, [input]);

  const handleSend = () => {
    if (input.trim() && !isLoading) {
      onSendMessage(input);
      setInput('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="flex items-start space-x-3 bg-slate-700 border border-slate-600 rounded-lg p-2">
      <textarea
        ref={textareaRef}
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="你好！有什么可以帮你的吗？ (例如：帮我解释一下这段代码)"
        className="flex-1 bg-transparent text-slate-200 placeholder-slate-400 focus:outline-none resize-none max-h-48"
        rows={1}
        disabled={isLoading}
      />
      <button
        onClick={handleSend}
        disabled={isLoading || !input.trim()}
        className="p-2 rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed enabled:bg-cyan-500 enabled:hover:bg-cyan-600"
        aria-label="发送消息"
      >
        <SendIcon className="w-5 h-5 text-white" />
      </button>
    </div>
  );
};

export default ChatInput;
